<template>
  <div class="container">
    <div class="header">
      <image :src="cutData.img_url" mode="aspectFill"></image>
      <div><span>还剩下:{{timeDown}}</span></div>
    </div>
    <div class="introduce">
      <div class="introduce_school">{{cutData.school_name}}班</div>
      <div class="introduce_tip">
        <span>定制砍价</span>
        <span>有几率一刀砍掉全款</span>
        <span>最多{{cutData.max_num}}人参与</span>
      </div>
    </div>
    <process :processData="processData"></process>

    <div class="activities">
      活动说明：<br/>
      <div v-for="(value,index) in activity_desc" :key="index">{{value}}</div>
    </div>
    <ul class="insaneCutBtn">
      <li @click="cutPrice">
        <image src="http://file.rzkeji.com/web/loveciy/img/cutPrice/insaneCut.png" class="insaneCut"></image>
      </li>
      <li @click="sharePrice">
         <image src="http://file.rzkeji.com/web/loveciy/img/cutPrice/invitationCut.png" class="invitationCut"></image>
      </li>
    </ul>

    <div class="goodFriends">
      <div class="goodFriends_title">好友助力({{cutData.cut_num_count}}/{{cutData.max_num}})</div>
      <ul class="goodFriends_details">
        <li v-for="(value,index) in cutData.cut_user_list" :key="index">
          <image :src="value.photo_url" class="details_img"></image>
          <span class="details_money">{{value.nickname}}帮砍掉<span>{{value.cut_price}}</span>元</span>
          <span class="detals_time">{{value.created_at}}</span>
        </li>
      </ul>
    </div>
    <image src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer" mode="aspectFill"></image>
     <div class="ucenter">
          <navigator url="../personal/main">
            <image src="http://ciy.oss-cn-shenzhen.aliyuncs.com/web/cut/icon-ucenter.png" class="customer"></image>
          </navigator>
    </div>
    <div class="customerWrap">
          <navigator url="../customer/main">
            <image src="http://file.rzkeji.com/web/loveciy/img/customer.png" class="customer"></image>
          </navigator>
    </div>
  </div>
</template>

<script>
import process from '@/pages/components/process/index.vue'
export default {
  components: {
    process
  },
  data () {
    return {
      processData:{
        winning_odds:'',
        winning:'',
        winning_money:'',
        type:"cut"
      },
      id:"",
      cutData:[],
      timeInterval:"",
      userToken:""
    }
  },
  computed:{
    // getCutData(){
    //   return this.$store.state.modulesCutPrice.cutPriceData;
    // },
    activity_desc(){
      if(this.cutData.activity_desc!=undefined){
        return this.cutData.activity_desc.split('\n')
      }
    },
    timeDown(){
      if(this.cutData.last_time_int!=undefined){
        return this.$currency.formatSeconds(this.cutData.last_time_int)
      }
    }
  },
  onLoad (options) {
    this.id=options.id
  },
  onShow(){
    var _this=this;
    _this.getCutData();
    clearInterval(_this.timeInterval)
    _this.timeInterval=setInterval(function(){
      _this.cutData.last_time_int--;
      if(_this.cutData.last_time_int<0){
        _this.cutData.last_time_int=0;
        clearInterval(_this.timeInterval)
      }
      _this.timeDown=_this.$currency.formatSeconds(_this.cutData.last_time_int)
    },1000)
  },
  methods:{
    async getCutData(){
      this.userToken=uni.getStorageSync('userToken')
	  let res=await this.$api.getActivityBargainDetail({user_token:this.userToken,id:this.id})
      this.cutData=res.data.data;
      [this.processData.winning_odds,this.processData.winning]=[this.cutData.cut_num_count,this.cutData.max_num]
      this.processData.winning_money=this.cutData.cut_price_count+"元"
    },
    async cutPrice(){
		let res=await this.$api.cutAtivityBargainPrice({id:this.id,user_token:this.userToken})
      if(res.data.level=='success'){
        this.getCutData();
      }
	  uni.showToast({
	  	icon:'none',
		title:res.data.message,
		duration:3500
	  })
    },
    sharePrice(){
      var _this=this;
        uni.showLoading({
            title:'正在生成分享图'
        }),
      uni.getImageInfo({
        src:_this.cutData.share_img_url,
        success(res){
        uni.saveImageToPhotosAlbum({
          filePath:res.path,
          success(res) {
              uni.hideLoading(),
			uni.showToast({
				icon:'none',
					title:'成功合成并保存到相册咯！',
					duration:3500
			})
          },
            fail(res){
                uni.hideLoading()
            }
         })
        }
      })
    }
  },
  destroyed (){
    clearInterval(this.timeInterval)
  },
  onHide(){
    clearInterval(this.timeInterval)
  },
    onShareAppMessage: function (res) {   //分享
        this.$currency.share(res,'班服定制/砍价活动','/pages/drawList/cutPrice/main?id='+this.id)
    }
}
</script>

<style scoped>
.container{width: 100%;overflow: hidden;padding-bottom:55px;}
.header{width: 375px;height:187.5px;position: relative;}
.header image{width: 375px;height: 187.5px;}
.header div{width: 100%;height: 36.5px;position: absolute;left: 0px;bottom: 0; background: rgba(0,0,0,0.4);}
.header span{height:36.5px;font-size: 14px;color:#fff;line-height: 36.5px;display: block;float: right;margin-right: 10px;}
.introduce{width: 344px;padding: 15.5px;}
.introduce_school{width: 375px;height: 18.5px;font-size: 16px;}
.introduce_tip{width: 375px;height: 16.5px;line-height: 16.5px;display: flex;justify-content: row;margin-top: 20px;}
.introduce_tip span{height: 16.5px;color: #999999;font-size: 11px;}
.introduce_tip span:nth-of-type(1){width: 62px;color:#FE2D54;font-size: 14px;}
.introduce_tip span:nth-of-type(2){width: 106px;}
.introduce_tip span:nth-of-type(3){font-size: 14px;margin-left: 90px;}
.activities{width: 344px;font-size: 12px;color: #666;margin-left: 15.5px;margin-top: 20px;}
.insaneCutBtn{width: 301px;height: 41.5px;display: flex;justify-content: row;margin-left: 37px;margin-top: 30px;}
.insaneCutBtn li{margin-left: 20px;}
.insaneCutBtn image{width: 124px;height: 41.5px;display: block;}
.goodFriends{width: 344px;margin-left: 15.5px;margin-top: 30px;}
.goodFriends .goodFriends_title{width: 334px;height: 18.5px;line-height: 18.5px;font-size: 16px;color: #666;}
.goodFriends ul{margin-top: 15px;}
.goodFriends ul li{width: 334px;display: flex;justify-content: row;font-size: 13px;margin-bottom: 5px;position: relative;}
.details_img{width: 36.5px;height: 36.5px;border-radius: 36.5px; }
.details_money{line-height:36.5px;color: #666;margin-left: 10px;}
.details_money span{color: red;}
.detals_time{line-height:36.5px;color: #666;position: absolute;right: 0;top: 0;}
.footer{width: 100%;display: block;height: 36px;}
.customerWrap{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 120px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.customer{width:40px;height:40px;margin-left:5px;margin-top:5px;}
.ucenter{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 179px;background: rgba(0,0,0,0.5);border-radius: 50px;}
button{width: 124px;height: 41.5px;background: transparent;padding: 0;}
button::after{border:none;}   /*初始化button的样式*/
</style>
